<template>
	<view class="aa">
		<view class="searchBox box flex_r_between">
			<view class="search_bgc flex_r_start">
				<image style="width: 24rpx; height: 24.4rpx;margin-right: 8rpx;" src="../../static/homeImg/icon/search@2x.png" mode=""></image>
				<input type="text" v-model="searchValue" @confirm="confirm" placeholder="请输入" placeholder-class="pl" confirm-type="搜索" />
			</view>
			<view class="close" @click="$navigateBack">
				取消
			</view>
		</view>
		<view class="tab_result box flex_r_between">
			<view class="textOp" :class="{textOp1:isCheck}" @click="isCheck=true">
				<view>商品结果</view>
				<view class="fgh"></view>
			</view>
			<view class="textOp" :class="{textOp1:!isCheck}" @click="isCheck=false">
				<view>文章结果</view>
				<view class="fgh"></view>
			</view>
		</view>
		<scroll-view v-if="scrollTop" style="background-color: #F3F4F5;"
		 scroll-x="true" 
		 refresher-enabled="true"
		 :refresher-triggered="refresherTriggered" 
		 :refresher-threshold="0" 
		 refresher-background="#F3F4F5" 
		 @refresherpulling="onPulling"
		 @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore"
		 @refresherabort="onAbort">
			<view class="product" v-if="isCheck">
				<view class="grid-item" v-for="(item,index) in dataList" :key="index"
				 @click="Details(item.goods_id)">
					<image class="img" :src="item.cover||'../../static/微信图片_20201124091755.png'" mode=""></image>
					<view class="text">
						<view class="introduce">商品一句话介绍，美味难挡</view>
						<view class="title">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
						<view class="evaluate">
							<image src="../../static/homeImg/userImg.png" mode=""></image>
							<view class="content">这也太好吃了吧，新鲜美味这也太好吃了吧，新鲜美味这也太…</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listOrt" v-else>
				<view class="option" v-for="(item,index) in dataList1" :key="index">
					<view class="option-title">
						<view class="title-left">
							<view class="option-awater" @click="$linkTo('./author')">
								<image src="../../static/homeImg/userImg.png" mode=""></image>
							</view>
							<view>研究所</view>
						</view>
						<!-- <view class="title-right" @click="collection">
							<image src="../../static/threedoit.png" mode="widthFix"></image>
						</view>
						<view class="isCollection" v-if="isCollection">
							取消收藏
						</view> -->
					</view>
					<view class="option-img" @click="$linkTo('../home/home/article_detail?article_id='+item.article_id)">
						<image :src="item.cover||'../../static/微信图片_20201124091755.png'" mode=""></image>
					</view>
					<view class="option-detail">
						<view class="detail-title">{{item.title}}</view>
						<view class="detail-data">
							<view class="look">
								<view class="look-icons">
									<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>{{item.browse}}
								</view>
								<view class="look-icons">
									<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>{{item.likes}}
								</view>
							</view>
							<view class="hours">{{$timeago(item.date_add*1000)}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</scroll-view>
		<view style="background-color: #F3F4F5;" v-else>
			<view class="product" v-if="isCheck">
				<view class="grid-item" v-for="(item,index) in dataList" :key="index"
				 @click="Details(item.goods_id)">
					<image class="img" :src="item.cover||'../../static/微信图片_20201124091755.png'" mode=""></image>
					<view class="text">
						<view class="introduce">商品一句话介绍，美味难挡</view>
						<view class="title">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
						<view class="evaluate">
							<image src="../../static/homeImg/userImg.png" mode=""></image>
							<view class="content">这也太好吃了吧，新鲜美味这也太好吃了吧，新鲜美味这也太…</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listOrt" >
				<view class="option" v-for="(item,index) in dataList1" :key="index">
					<view class="option-title">
						<view class="title-left">
							<view class="option-awater" @click="$linkTo('./author')">
								<image src="../../static/homeImg/userImg.png" mode=""></image>
							</view>
							<view>研究所</view>
						</view>
						<!-- <view class="title-right" @click="collection">
							<image src="../../static/threedoit.png" mode="widthFix"></image>
						</view>
						<view class="isCollection" v-if="isCollection">
							取消收藏
						</view> -->
					</view>
					<view class="option-img" @click="$linkTo('../home/home/article_detail?article_id='+item.article_id)">
						<image :src="item.cover||'../../static/微信图片_20201124091755.png'" mode=""></image>
					</view>
					<view class="option-detail">
						<view class="detail-title">{{item.title}}</view>
						<view class="detail-data">
							<view class="look">
								<view class="look-icons">
									<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>{{item.browse}}
								</view>
								<view class="look-icons">
									<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>{{item.likes}}
								</view>
							</view>
							<view class="hours">{{$timeago(item.date_add*1000)}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCollection: false,
				searchValue: '',
				isCheck: true,
				status: 'loading-loading', // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				refresherTriggered: false,
				_refresherTriggered: false,
				page:1,
				page1:1,
				dataList:[],
				dataList1:[],
				historySearch:[],
				scrollTop:true,
			};
		},
		watch:{
			isCheck:function(val,oldVal){
				this.searchArticle(true)
				this.searchGoods(true)
				if(!val){
					
					this.confirm()
				}
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop);//距离页面顶部距离
			if(e.scrollTop>20){
				this.scrollTop=false
			}else{
				this.scrollTop=true
			}
		},
		onLoad(option) {
			console.log(option)
			this.searchValue=option.value
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
			this.searchGoods()
		},
		onShow() {
			this.historySearch=uni.getStorageSync('historySearch')?uni.getStorageSync('historySearch'):[]
		},
		methods: {
			confirm(e){
				this.historySearch.unshift(e.detail.value)
				this.historySearch=[...new Set(this.historySearch)]
				uni.setStorageSync('historySearch',this.historySearch)
				if(this.isCheck){
					this.searchGoods(true)
				}else{
					this.searchArticle(true)
				}
			},
			searchGoods(shua){
				this.$request('/app/search/searchGoods','post',{
					keyword:this.searchValue,
					page:this.page
				}).then(res=>{
					if(shua){
						this.dataList=res.content
					}else{
						this.dataList=this.dataList.concat(res.content)
					}
					
				})
			},
			searchArticle(shua){
				this.$request('/app/search/searchArticle','post',{
					keyword:this.searchValue,
					page:this.page1
				}).then(res=>{
					if(shua){
						this.dataList1=res.content
					}else{
						this.dataList1=this.dataList1.concat(res.content)
						if(res.content.length==0){
							// this.status='noMore'
						}
					}
				})
			},
			collection() {
				this.isCollection = !this.isCollection
				console.log('收藏')
			},
			Details(e) {
				// uni.setStorage({
				// 	key: 'goods_id',
				// 	data: JSON.stringify(e),
				// 	success: function() {}
				// });
				uni.navigateTo({
				    url: '/pagesA/CommodityDetails/CommodityDetails?goods_id='+e
				});
			},
			onPulling(e) {
				// console.log("onpulling", e);
			},
			onRefresh() {
				console.log('自定义下拉刷新被触发');
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			onRestore() {
				console.log('自定义下拉刷新被复位');
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			onAbort() {
				console.log('自定义下拉刷新被中止	');
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			loadStoreData() {
				let _this = this;
				this.listData();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1000);
			},
			listData() {
				let _this = this;
				//这里是调用后台接口的方法数据
				this.page=1
				this.page1=1
				if(this.isCheck){
					this.searchGoods(true)
				}else{
					this.searchArticle(true)
				}
			},
	
			// onRefresh() {
			// 	if (this._freshing) return;
			// 	this._freshing = true;
			// 	this.page=1
			// 	this.page1=1
			// 	if(this.isCheck){
			// 		this.searchGoods(true)
			// 	}else{
			// 		this.searchArticle(true)
			// 	}
			// 	this.triggered = false;
			// 	this._freshing = false;
			// },
			// onRestore() {
			// 	this.triggered = 'restore'; // 需要重置
			// 	console.log("onRestore");
			// },
			// onAbort() {
			// 	console.log("onAbort");
			// },
			onReachBottom() {
				
			},
			scrolltolower(){
				if(this.isCheck){
					this.page++
					this.searchGoods(false)
				}else{
					this.page1++
					this.searchArticle(false)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");
	.aa{
		height: 100%;
	}
	.box {
		box-sizing: border-box;
	}

	.listOrt {
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.option {
		background: #FFFFFF;
		width: 100%;
		padding-bottom: 10rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;

		.option-title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.title-left {
				color: #777777;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.option-awater {
					width: 48rpx;
					height: 48rpx;
					border-radius: 99px;
					margin-right: 16rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.title-right {
				width: 24rpx;
				height: 24rpx;

				image {
					width: 100%;
				}
			}

			.isCollection {
				position: absolute;
				top: 56rpx;
				right: 20rpx;
				height: auto;
				width: auto;
				padding: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 6rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 80rpx;
			}
		}

		.option-img {
			width: 100%;
			height: 420rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.option-detail {
			padding: 20rpx;

			.detail-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 28rpx;
			}

			.detail-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;
				font-size: 20rpx;

				.look {
					display: flex;
					align-items: center;

					.look-icons {
						display: flex;
						align-items: center;
						margin-right: 20rpx;

						.look-icon {
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}

	.tab_result {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;

		// padding: 0 170rpx;
		.textOp {
			height: 86%;
			width: 50%;
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 80rpx;
			text-align: center;
		}

		.textOp1 {
			font-weight: 500;
			position: relative;

			.fgh {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 4rpx;
				background: #DB1B22;
				border-radius: 2rpx;

			}
		}

	}

	.searchBox {
		width: 100%;
		padding: 16rpx 24rpx 16rpx 20rpx;

		.search_bgc {
			width: 630rpx;
			height: 60rpx;
			background: #EDEEEF;
			border-radius: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			input {
				height: 100%;
				width: 80%;
				font-size: 24rpx;
			}

			.pl {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}

		.close {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

		}
	}

	.product {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;

		.grid-item {
			height: 640rpx;
			width: 48%;
			box-sizing: border-box;
			border-radius: 3px;
			padding: 10rpx 20rpx;
			margin: 10rpx 5rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img {
				width: 270rpx;
				height: 298rpx;
				background-color: pink;
			}

			.text {
				display: flex;
				flex-direction: column;
				align-items: center;

				.introduce {
					margin: 10rpx 0;
					padding: 8rpx;
					background: #FFF3F3;
					border-radius: 3px;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
				}

				.title {
					font-size: 26rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #333333;
					font-size: 26rpx;
					height: 68rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.price {
					margin: 10rpx 0;
					width: 100%;
					line-height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
				}

				.evaluate {
					border-top: 1px solid #DDDDDD;
					padding: 10rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 74rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 3px;
					}

					.content {
						flex: 1;
						font-size: 18rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #777777;
						line-height: 26rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
